<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            /* 设置视距 */
            perspective: 800px;
            /* 要做3d一定要写上 */
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin: 200px 0px;

             transition: 2s;
             animation-name: box1;
             animation-duration: 2s;
             animation-timing-function: ease-in-out;
             animation-iteration-count: infinite;
             animation-direction: alternate;
        }
        .box1:hover{
           /* 
           通过选择可以使元素x y 或z旋转指定的效果
            rolateX()
            rolateY()
            rolateZ()
            */
            transform: translateZ(400px) rotateY(720deg) ;

            /* 是否显示元素的背面 */
        }
        @keyframes box1{
            from{
                margin-left: -300px;
                transform: translateZ(0) rotateY(0) ;
            }
            to{
                margin-left: 700px;
                transform:  translateZ(-1000px) rotateZ(720deg) ;
                
            }
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>